<template lang="">
    <div>
        <van-nav-bar title="科普宣教" />
        
        <div class="item-list">
            <div class="item">
                <div class="item-title">
                    <div>社区护士培训课程</div>
                    <div>查看更多</div>
                </div>
                <div class="item-video">
                    <div class="video-title">
                        <van-image  
                        src="/static/img/video-demo.png" class="img" />
                        <div>胰岛素配置及注射的操作方法与规范流程</div>
                    </div>
                    <div class="video-title">
                        <van-image  
                        src="/static/img/video-demo.png" class="img" />
                        <div>胰岛素配置及注射的操作方法与规范流程</div>
                    </div>
                    <div class="video-title">
                        <van-image  
                        src="/static/img/video-demo.png" class="img" />
                        <div>胰岛素配置及注射的操作方法与规范流程</div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="item-title">
                    <div>社区护士培训课程</div>
                    <div>查看更多</div>
                </div>
                <div class="item-video">
                    <div class="video-title">
                        <van-image  
                        src="/static/img/video-demo.png" class="img" />
                        <div>胰岛素配置及注射的操作方法与规范流程</div>
                    </div>
                    <div class="video-title">
                        <van-image  
                        src="/static/img/video-demo.png" class="img" />
                        <div>胰岛素配置及注射的操作方法与规范流程</div>
                    </div>
                    <div class="video-title">
                        <van-image  
                        src="/static/img/video-demo.png" class="img" />
                        <div>胰岛素配置及注射的操作方法与规范流程</div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="item-title">
                    <div>社区护士培训课程</div>
                    <div>查看更多</div>
                </div>
                <div class="item-video">
                    <div class="video-title">
                        <van-image  
                        src="/static/img/video-demo.png" class="img" />
                        <div>胰岛素配置及注射的操作方法与规范流程</div>
                    </div>
                    <div class="video-title">
                        <van-image  
                        src="/static/img/video-demo.png" class="img" />
                        <div>胰岛素配置及注射的操作方法与规范流程</div>
                    </div>
                    <div class="video-title">
                        <van-image  
                        src="/static/img/video-demo.png" class="img" />
                        <div>胰岛素配置及注射的操作方法与规范流程</div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="item-title">
                    <div>社区护士培训课程</div>
                    <div>查看更多</div>
                </div>
                <div class="item-video">
                    <div class="video-title">
                        <van-image  
                        src="/static/img/video-demo.png" class="img" />
                        <div>胰岛素配置及注射的操作方法与规范流程</div>
                    </div>
                    <div class="video-title">
                        <van-image  
                        src="/static/img/video-demo.png" class="img" />
                        <div>胰岛素配置及注射的操作方法与规范流程</div>
                    </div>
                    <div class="video-title">
                        <van-image  
                        src="/static/img/video-demo.png" class="img" />
                        <div>胰岛素配置及注射的操作方法与规范流程</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getItem, getItemCate, addItemCate } from "../api/index"
import { getUserInfo, log, LOCAL_USER } from "../utils/user"
import { showToast, showConfirmDialog } from 'vant';
export default {
    setup() {
        const router = useRouter()
        const route = useRoute()
        const userInfo = getUserInfo();

        const tab = ref('zl')
        return {
            tab
        }
    }
}
</script>
<style scoped>
.item-list{
    display: flex;
    flex-direction: column;
    padding: 15px;
}
.item{
    display: flex;
    flex-direction: column;
    padding:12px 0 ;
    border-bottom: 1px solid #E3E4E5;
}
.item-title{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 12px;
}
.item-video{
    display:flex;
    flex-direction: row;
}
.video-title{
    width: 30%;
    margin-right: 3.3%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.img{
    margin-bottom: 5px;
}
</style>